<script>
import CourseCom from "@/views/course/components/courseCom.vue";
import SmallCourse from "@/views/course/components/smallCourse.vue";
import {getCourseListNew} from "@/api/http";
import HeaderYun from "@/components/headerYun.vue";
import CarouselCom from "@/components/carouselCom.vue";

export default {
  name: "courseIndex",
  components: {CarouselCom, HeaderYun, SmallCourse, CourseCom},
  data() {
    return {
      courseList: [],
      courseParams: {
        type: 'free',
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  methods: {
    getCourseList(data) {
      getCourseListNew(data).then(res => {
        console.log(res, '小组件请求')
        this.courseList = res.rows
      })
    }
  },
  created() {
    this.getCourseList(this.courseParams);
  }
}
</script>

<template>
  <div>
    课程首页
    <header-yun></header-yun>
    <carousel-com></carousel-com>
    <!--  <h1>免费课程</h1>-->
    <!--  <course-com courseType="free"></course-com>-->
    <course-com>
      <!--    <h1>免费课程</h1>-->
      <!--   具名插槽：v-slot:插槽名  #插槽名  -->
      <!--
      <template v-slot:title>
              <h1>免费课程</h1>
            </template> -->
      <template #title>
        <h1>免费课程</h1>
      </template>
      <template v-slot:footer>
        <p>底部内容</p>
      </template>
<!--      <template #sonSlot="data">{{data.sonData}}</template>-->
      <template v-slot:sonSlot="data">{{data.sonData}}</template>
    </course-com>
    <!--  <h1>精品课程</h1>-->
    <course-com course-type="boutique"></course-com>
    <!--  <h1>限时折扣课程</h1>-->
    <course-com course-type="discount"></course-com>

    小组件：
    <h1>免费课程</h1>
    <div class="course">
      <small-course class="course-item" v-for="item in courseList" :key="item.courseId"
                    :courseItem="item"></small-course>
    </div>
  </div>
</template>

<style scoped lang="less">
.course {
  display: flex;
  width: 1200px;
  justify-content: space-around;

  &-item {
    width: 18%;
  }
}
</style>